<template>
  <el-dialog :title="title+'分类'"
            :visible.sync="isShow"
            width="45%"
            @close="cancel">
  <el-form ref="formRef" :rules="formRules" :model="formData" class="info-form"  label-width="110px">
      <el-row>
        <el-col :span="20">
          <el-form-item label="分类名称"
                        prop="catename">
            <el-input size="medium" v-model="formData.catename"
                      placeholder="请输入分类名"></el-input>
          </el-form-item>
          <el-form-item label="图标class"
                        prop="icon">
            <el-input style="width:170px;" size="medium" v-model="formData.icon"
                      placeholder="请输入class名"></el-input>
                      <i :class="['fa', formData.icon]"></i>
            &nbsp;&nbsp;&nbsp; <el-link href="http://www.fontawesome.com.cn/icons-ui/" target="_blank">具体参见fontawesome图标库</el-link>
          </el-form-item>
          <el-form-item label="排序大小">
            <el-input-number v-model="formData.sort_num" :min="1" :max="100" label="描述文字"></el-input-number>
          </el-form-item>
        </el-col>
      </el-row>
  </el-form>
  <div slot="footer">
    <el-button @click="cancel"
                size="small">取消</el-button>
    <el-button type="primary"
                size="small"
                @click="submit">确定</el-button>
  </div>
</el-dialog>
</template>
<script>
import { addData, updateData, getInfoData } from '@/api/content/cate'
const formRules = {
  catename: [{ required: true, message: '分类名称类型必须！', trigger: 'blur' }],
  icon: [{ required: true, message: '分类图标class必须！', trigger: 'blur' }]
}
const defaultItem = {
  catename: '', // 分类名称
  icon: '',
  sort_num: 10
}
export default {
  name: 'cateInfo',
  data () {
    return {
      isShow: false,
      isAdd: true,
      formData: { ...defaultItem },
      formRules
    }
  },
  computed: {
    title () {
      return this.isAdd ? '添加' : '修改'
    }
  },
  methods: {
    //  获取单行信息回显
    async getInfo (id) {
      this.formData = await getInfoData(id)
      this.isAdd = false
      this.isShow = true
    },
    //  增加或更新提交
    async submit () {
      //  验证
      try {
        await this.$refs.formRef.validate()
      } catch (error) {
        return this.$message.warning('验证失败')
      }
      //  提交
      if (this.isAdd) {
        await addData(this.formData)
        this.$message.success('添加成功')
      } else {
        await updateData(this.formData)
        this.$message.success('修改成功')
      }
      // 更新列表
      this.$emit('update-list')
      // 关闭
      this.cancel()
    },
    cancel () {
      this.isShow = false
      this.isAdd = true
      this.formData = { ...defaultItem }
      this.$refs.formRef.clearValidate()
    }
  }
}
</script>
<style scoped></style>
